/**
 * create by young (young2f@outlook.com) on 2020/8/18
 */

'use strict';
import React, {Component} from 'react';
import {Button, Form, Input, notification, Select, Switch} from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {FormField, FormLayout, ModalFooter,} from 'antd-extra';
import TextArea from 'antd/es/input/TextArea';

const {Option} = Select;
const _ = require('lodash')
moment.locale('zh-cn');

@Form.create()
class ModalEditDLabel extends Component {
  constructor(props) {
    super(props);
    this.state = {type: undefined}
  }

  componentDidMount() {

  }

  selectChange = item => {
     this.state.type = item;
  }
  labelInfo = () => {
    const {data, form} = this.props;

    const {label, key, defaultValue, selectOption, required = true, type} = data;

    let isSelect = false;
    let defaultValueView = <Input style={{width: '60%'}}></Input>;
    const switchView = <Switch defaultChecked={false}></Switch>;
    const selectView = <Select style={{width: '60%'}}></Select>;

    if (!this.state.type) {
      if (type === 'Switch') {
        defaultValueView = switchView;
        isSelect = false;
      }

    } else {
      if (this.state.type === 'Switch') {
        defaultValueView = switchView;
        isSelect = false;
      }

    }

    return (<Form>

      <FormLayout form={form} cols={1}>
        <FormField
          label={'是否必填项'}
          name={'required'}
        >
          <Switch defaultChecked={required}></Switch>
        </FormField>
        <FormField
          label={'配置值名称'}
          name={'label'}
          required
          initialValue={label}
        >
          <Input style={{width: '60%'}}/>
        </FormField>
        <FormField
          label={'配置值数据字段'}
          name={'key'}
          required
          initialValue={key}
        >
          <Input style={{width: '60%'}}></Input>
        </FormField>

        <FormField
          label={'录入方式'}
          name={'type'}
          required
          initialValue={type}
        >
          <Select initialValue={type} style={{width: '60%'}} onChange={this.selectChange}>
            <Option value={'Input'}>Input</Option>
            <Option value={'Select'}>Select</Option>
            <Option value={'Switch'}>Switch</Option>
          </Select>
        </FormField>
        {isSelect && <FormField
          label={'选择项'}
          name={'selectOption'}
          required
          initialValue={selectOption}
        >
          <TextArea style={{width: 720}} rows={10} placeholder="以换行分隔"></TextArea>
        </FormField>}
        {isSelect && <FormField
          label={'示例'}
          name={'exm'}
          required
          initialValue={'显示字段:数据字段'}
        >
          <div>显示字段 : 数据字段</div>
        </FormField>}
        <FormField
          label={'配置值默认值'}
          name={'defaultValue'}
          initialValue={defaultValue}
        >
          {defaultValueView}
        </FormField>
      </FormLayout>
    </Form>)
  }
  renderFoot = () => {
    const {foot, value, modalRef} = this.props;
    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            const {result} = this.props;
            // const values = this.props.form.getFieldsValue();
            this.props.form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                })
                return;
              }

              result&&result(values);
              modalRef.close();
            });
          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      )
    }
  }

  render() {

    return (
      <div>
        {this.labelInfo()}
        {this.renderFoot()}
      </div>
    )
  }
}

export default ModalEditDLabel
